<template>
  <div class="tbc-flex-col" style="justify-content: center;position: relative" :style="outerStyle">
    <div style="margin: 0 auto;" :style="containerStyle">
      <el-carousel :height="height" arrow="never">
        <el-carousel-item v-for="(item, index) in module.data" :key="index">
          <!--        <h3>{{ index + 1 }}</h3>-->
          <img :src="item.image" :style="containerStyle" v-if="item.image"/>
          <!--        <img :src="item.image" :style="containerStyle"/>-->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      module: {
        config: {
          outer: {},
        },
        data: []
      },
      outerStyle: '',
      containerStyle: '',
      height: ''
    }
  },

  methods: {

    // 初始化
    init(module) {
      this.module = module
      this.setOuterStyle()
      this.setContainerStyle()
    },

    // 设置外层容器样式
    setOuterStyle() {
      let style = [], config = this.module.config.outer || {}
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      if (config.paddingTop) style.push('padding-top:' + config.paddingTop / 2 + 'px')
      if (config.paddingBottom) style.push('padding-bottom:' + config.paddingBottom / 2 + 'px')
      if (config.marginTop) style.push('margin-top:' + config.marginTop / 2 + 'px')
      if (config.marginBottom) style.push('margin-bottom:' + config.marginBottom / 2 + 'px')
      this.outerStyle = style.join(';')
      console.log(this.outerStyle)
    },

    // 设置内层容器样式
    setContainerStyle() {
      let style = [], config = this.module.config.container || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      if (config.height) this.height = config.height / 2 + 'px'
      this.containerStyle = style.join(';')
    }
  }
}
</script>